<template>
  <div class="paperResult-con">
    <div class="header h-[80px]">任务报告</div>
    <div class="flex flex-col items-center chenji">
      <!-- <div>你的分数</div> -->
      <div class="text-red-500 text-[30px]">{{ scores }}分</div>
      <div class="mt-15 text-[25px] text-sky-50">答对得分</div>
    </div>

    <div
      class="h-[80px] answer-card flex items-center justify-center text-[20px]"
    >
      答题卡
    </div>

    <div class="btn-tag flex m-3">
      <div class="flex items-center">
        <div class="bg-[#38c860] w-[20px] h-[20px] rounded-lg mr-2"></div>
        正确
      </div>

      <div class="flex items-center mx-3">
        <div class="bg-[#fd6060] w-[20px] h-[20px] rounded-lg mr-2"></div>
        错误
      </div>

      <div class="flex items-center">
        <div class="bg-[#fafafa] w-[20px] h-[20px] rounded-lg mr-2"></div>
        未作
      </div>
    </div>

    <div v-if="paperInfo && paperInfo.answers.length" v-loading="loading">
      <div v-if="radioArr.length" class="ml-3 text-[18px]">单项选择题</div>
      <div class="buttons flex flex-wrap" v-if="radioArr.length">
        <n-button
          class="m-3 w-[40px] h-[40px]"
          v-for="(item, index) in radioArr.length"
          :key="index"
          :color="renderType(paperInfo.answers[index], index)"
          :style="{
            color:
              renderType(paperInfo.answers[index], index) === '#fafafa'
                ? '#000'
                : '#fff'
          }"
        >
          {{ index + 1 }}
        </n-button>
      </div>
      <div v-if="mulArr.length" class="ml-3 text-[18px]">多项选择题</div>
      <div class="buttons flex flex-wrap" v-if="mulArr.length">
        <n-button
          class="m-3 w-[40px] h-[40px]"
          v-for="(item, index) in mulArr.length"
          :key="index + radioArr.length"
          :color="
            renderType(
              paperInfo.answers[index + radioArr.length],
              index + radioArr.length
            )
          "
          :style="{
            color:
              renderType(
                paperInfo.answers[index + radioArr.length],
                index + radioArr.length
              ) === '#fafafa'
                ? '#000'
                : '#fff'
          }"
        >
          {{ index + radioArr.length + 1 }}
        </n-button>
      </div>
      <div v-if="panduanArr.length" class="ml-3 text-[18px]">判断题</div>
      <div class="buttons flex flex-wrap" v-if="panduanArr.length">
        <n-button
          class="m-3 w-[40px] h-[40px]"
          v-for="(item, index) in panduanArr.length"
          :key="index"
          :color="
            renderType(
              paperInfo.answers[index + radioArr.length + mulArr.length],
              index + radioArr.length + mulArr.length
            )
          "
          :style="{
            color:
              renderType(
                paperInfo.answers[index + radioArr.length + mulArr.length],
                index + radioArr.length + mulArr.length
              ) === '#fafafa'
                ? '#000'
                : '#fff'
          }"
        >
          {{ index + radioArr.length + mulArr.length + 1 }}
        </n-button>
      </div>
    </div>

    <!-- <div
      class="buttons flex flex-wrap"
      v-if="paperInfo && paperInfo.answers.length"
    >
      <n-button
        class="m-3 w-[40px] h-[40px]"
        v-for="(item, index) in paperInfo.answers"
        :key="index"
        :color="renderType(item, index)"
        :style="{
          color: renderType(item, index) === '#fafafa' ? '#000' : '#fff'
        }"
      >
        {{ index + 1 }}
      </n-button>
    </div> -->

    <div class="flex justify-center my-6 items-center">
      <n-button @click="handleToAnswer" size="large" type="warning">
        重新练习
      </n-button>
      <n-button @click="handleViewAna" class="mx-6" size="large" type="success">
        查看解析
      </n-button>
      <n-button @click="handleToChapterList" size="large" color="#ed3432">
        返回目录
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getErrorQuestionByPage } from '@/api/errorQuestion'
import { getExamHistoryByPage } from '@/api/examHistory'
import { getPaperById } from '@/api/paper'
import { getQuestionFavByPage } from '@/api/questionFav'
import { userLoading } from '@/hooks/useLoading'
import useUserStore from '@/stores/modules/user'
import { removeItem } from '@/utils/storage'

const { loading, openLoading, closeLoading } = userLoading()

const userStore = useUserStore()

const route = useRoute()
const router = useRouter()
const paperInfo = ref()

const typeInfo = ref<any[]>([])

const radioArr = computed(() => {
  return typeInfo.value.filter((item) => +item === 1)
})

const mulArr = computed(() => {
  return typeInfo.value.filter((item) => +item === 2)
})

const panduanArr = computed(() => {
  return typeInfo.value.filter((item) => +item === 4)
})
const loadPaperById = async () => {
  if ('' + route.query.type == '2') {
    getErrorQuestionByPage({
      page: 1,
      pageSize: 999,
      userId: userStore.userInfo?.id,
      paperId: route.query.paperId as string
    }).then((res) => {
      if (res.data.items.length) {
        paperInfo.value = res.data.items[0].Paper
        paperInfo.value.answers = res.data.items.map((v) => {
          return v.Question.answer
        })
        typeInfo.value = res.data.items.map((v: any) => v.Question.type)
      }
    })
  } else if ('' + route.query.type == '3') {
    getQuestionFavByPage({
      page: 1,
      pageSize: 999,
      userId: userStore.userInfo?.id,
      paperId: route.query.paperId as string
    }).then((res) => {
      if (res.data.items.length) {
        paperInfo.value = res.data.items[0].Paper
        paperInfo.value.answers = res.data.items.map((v) => {
          return v.Question.answer
        })
        typeInfo.value = res.data.items.map((v: any) => v.Question.type)
      }
    })
  } else {
    getPaperById(route.query.paperId as string).then((res) => {
      paperInfo.value = res.data.paper
      paperInfo.value.answers = paperInfo.value.Questions.map(
        (item: any) => item.answer
      )
      typeInfo.value = res.data.paper.Questions.map((item: any) => item.type)
    })
  }
}

const renderType = (item: string, index: number) => {
  if (yourAnswers.value[index] === '无') {
    return '#fafafa'
  }
  if (item === yourAnswers.value[index]) {
    return '#38c860'
  } else {
    return '#fd6060'
  }
}

const scores = computed(() => {
  let cnt = 0
  if (yourAnswers.value.length && paperInfo.value.answers.length) {
    for (let i = 0; i < yourAnswers.value.length; i++) {
      const a = yourAnswers.value[i]
      const b = paperInfo.value.answers[i]
      if (a === b) {
        cnt++
      }
    }
  }
  return cnt
})

const yourAnswers = ref<string[]>([])
const loadExamHistory = async () => {
  if (!userStore.userInfo) {
    await userStore.getUserInfo()
  }
  openLoading()
  getExamHistoryByPage({
    page: 1,
    pageSize: 1,
    userId: userStore.userInfo?.id,
    paperId: route.query.paperId as string,
    type: route.query.type as string
  })
    .then((res) => {
      // 获取你的answer
      if (res.data.items.length) {
        // 最新一次的
        const cur = res.data.items[res.data.items.length - 1]
        yourAnswers.value = cur.answers.split(',')
      }
    })
    .finally(() => {
      closeLoading()
    })
}

const handleToChapterList = () => {
  router.push({
    name: 'chapterList',
    query: {
      examId: route.query.examId
    }
  })
}

const handleToAnswer = () => {
  removeItem(route.query.paperId + 'time')
  removeItem(route.query.paperId + 'answer')
  removeItem(route.query.paperId + 'currentIndex')
  router.push({
    name: 'paperDetail',
    query: {
      examId: route.query.examId,
      paperId: route.query.paperId,
      type: route.query.type
    }
  })
}

const handleViewAna = () => {
  removeItem(route.query.paperId + 'currentIndex')
  router.push({
    name: 'paperDetail',
    query: {
      examId: route.query.examId,
      paperId: route.query.paperId,
      show: 1,
      type: route.query.type
    }
  })
}

onMounted(() => {
  loadPaperById()
  loadExamHistory()
})
</script>

<style scoped lang="scss">
.paperResult-con {
  background-color: #fff;
  width: 60%;
  margin: 10px auto;
  overflow: auto;
  height: 90vh;

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid #eee;
  }

  .answer-card {
    border-bottom: 1px solid #eee;
  }

  .chenji {
    background: url('../../../assets/images/chengji.png') no-repeat center 10px;
    height: 214px;
    padding-top: 70px;
    margin-top: 60px;
  }
}
</style>
